import axios from "axios"
import Mock from "../../../../mock/roleMock"
import { useEffect, useState } from "react"
import ColumnComponent from "../../../../components/ColumnComponent"
import SearchComponent from "../../../../components/SearchComponent"
import ButtonFormModelComponent from "../../../../components/ButtonFormModelComponent"
import { useSelector } from "react-redux"
import deepCopy from "../../../../util/deepCopy"

interface ListItem {
    roleName: string,
    pageRange: string,
}

interface menuItem {
    key: string,
    label: string,
    children?: menuItem[],
    value?: string,
    disabled?: boolean,
}

const buildTreeNodes = (menu: menuItem[]) => {
    return menu.map(item => {
        // 复制当前对象，避免直接修改原始对象  
        const newItem = { ...item };
        // 添加value属性，其值与key属性的值相同  
        newItem.value = item.key;
        // 如果对象有children属性且是一个数组，则递归处理  
        if (Array.isArray(item.children)) {
            newItem.disabled = true
            newItem.children = buildTreeNodes(item.children);
        }
        return newItem;
    });
}

function roleList() {

    Mock()
    const menu = useSelector((state: any) => state.menu)
    const menuNodes = buildTreeNodes(menu)
    console.log(menuNodes, 55656565656)
    const column = [
        {
            title: 'id',
            key: 'id',
            dataIndex: 'id'
        },
        {
            title: '角色名称',
            key: 'roleName',
            dataIndex: 'roleName',
            type: 'input'
        },
        {
            title: '权限范围',
            key: 'pageRange',
            dataIndex: 'pageRange',
            type: 'treeSelect',
            defaultData: menuNodes
        },
    ]
    const [data, setDatas] = useState<ListItem[]>([])
    useEffect(() => {
        console.log(menu, 56656)
        axios.get('/api/rolelist').then(res => {
            setDatas(res.data as ListItem[]);
        }).catch(error => {
            console.log(error);
        });
    }, []); // 空依赖数组表示只在组件挂载时执行一次 



    return (
        <>
            <SearchComponent></SearchComponent>
            <ButtonFormModelComponent column={column} handleTitle='新增角色' formData={[]}></ButtonFormModelComponent>
            <ColumnComponent column={column} data={data} />
        </>
    )
}

export default roleList